import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Dimensions,
  TouchableHighlight,
  ScrollView,
  Image,
  ActivityIndicator
} from "react-native";
import Swiper from "react-native-swiper";
import React, { useEffect, useState } from "react";
import Ionicons from "@expo/vector-icons/Ionicons";
import { getTeach, getImage } from "./services/hotTrack.d"
import SliderTeatch from "./components/SliderTeatch"; //热门讲师滑块
import AllTeatch from "./components/AllTeatch"; //全部讲师

// import 

const lectures = () => {
  const [state, setState] = useState(false); //控制搜索框的显示
  const [text, onChangeText] = useState("");

  const [loading, setLoading] = useState(true); // 加载状态
  const [imgList, setImgList] = useState([]); // 轮播图数据

  const [teach, setTeach] = useState([]) // 讲师列表

  // 获取轮播图数据
  const fetchCarouselImages = async () => {
    try {
      const response = await getImage()
      setImgList(response.data.carousel);
    } catch (error) {
      console.error("错误原因", error);
    } finally {
      setLoading(false);
    }
  };

  const TearchAll = async () => {
    try {
      const res = await getTeach()
      setTeach(res.data.ming);
    } catch (error) {
      console.error("错误原因", error);
    }
  }
  useEffect(() => {
    Promise.all([fetchCarouselImages(), TearchAll()])
  }, []);

  // 轮播图内容渲染
  const renderCarousel = () => {
    if (loading) {
      return (
        <View style={styles.loadingContainer}>
          <ActivityIndicator size="large" color="#007BFF" />
          <Text>Loading...</Text>
        </View>
      );
    }
    if (imgList.length === 0) {
      return (
        <View style={styles.errorContainer}>
          <Text>暂无图片</Text>
        </View>
      );
    }
    return (
      <Swiper
        autoplay={true}
        autoplayTimeout={3}
        style={{ height: 500 }}
        dotStyle={styles.dot}
        activeDotStyle={styles.activeDot}
      >
        {imgList.map((item: any, index) => (
          <View
            style={styles.slide}
            key={index}
          >
            <Image
              style={styles.slideImage}
              source={{ uri: item.carouselimg }}
            />
          </View>
        ))}
      </Swiper>
    );
  };

  return (
    <ScrollView>
      <View style={styles.container}>
        {/* 搜索 */}
        {state ? (
          <>
            <View style={styles.searchbox}>
              <View style={styles.searchinput}>
                <Ionicons name="search-outline" size={18} color={"#ccc"} style={{ marginLeft: 10, boxSizing: "border-box" }} />
                <TextInput
                  style={styles.input}
                  onChangeText={onChangeText}
                  value={text}
                  placeholder="搜索"
                />
                <Text style={{ marginLeft: 10, color: "blue" }} onPress={() => {
                  setState(false);
                }}>取消</Text>
              </View>
            </View>
          </>
        ) : (
          <>
            <View style={styles.searchbox}>
              <TouchableHighlight
                onPress={() => {
                  setState(true);
                }}
              >
                <View style={styles.search}>
                  <Ionicons name="search-outline" size={24} color={"#ccc"} />
                  <Text style={{ marginLeft: 10, color: "#ccc", boxSizing: "border-box" }}>搜索</Text>
                </View>
              </TouchableHighlight>
            </View>
          </>
        )}
        {renderCarousel()}
        <View >
          < SliderTeatch teach={teach.filter((item: any) => item.num >= 1)} />
        </View>
        <View>
          <AllTeatch teach={teach} />
        </View>
      </View >
    </ScrollView>

  )
}

export default lectures

const styles = StyleSheet.create({
  container: {
    height: 900,
    paddingVertical: 10,
    boxSizing: "border-box",
  },
  searchbox: {
    width: Dimensions.get("window").width,
    height: 60,
    alignItems: "stretch",
    justifyContent: "center",
    boxSizing: "border-box",
    marginLeft: 20,
  },
  search: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  searchinput: {
    width: Dimensions.get("window").width - 100,
    height: 40,
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#FFF",
    borderRadius: 20,
  },
  input: {
    height: 40,
    width: "90%",
  },
  slide: {
    flex: 1,
    height: 200,
    width: Dimensions.get("window").width,
    // paddingHorizontal: 10,
  },
  slideImage: {
    width: Dimensions.get("window").width,
    height: 200,
    maxWidth: "90%",
    resizeMode: "cover",
    textAlign: "center",
    marginLeft: '5%'
  },
  title: {
    width: Dimensions.get("window").width,
    color: "#000",
    fontSize: 16,
    textAlign: "center",
    backgroundColor: "#FFF",
    paddingHorizontal: 8,
    paddingVertical: 4,
    marginLeft: -9,
    borderRadius: 5,
  },
  dot: {
    backgroundColor: "rgba(255, 255, 255, 0.5)",
    width: 8,
    height: 8,
    borderRadius: 4,
    marginHorizontal: 3,
  },
  activeDot: {
    backgroundColor: "#FFF",
    width: 10,
    height: 10,
    borderRadius: 5,
    marginHorizontal: 3,
  },
  loadingContainer: {
    justifyContent: "center",
    alignItems: "center",
    height: 200,
  },
  errorContainer: {
    justifyContent: "center",
    alignItems: "center",
    height: 200,
  },
  content: {
    width: Dimensions.get("window").width,
    padding: 20,
  },
})